﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Progress演示，志玲姐姐 - swiper中文网</title>
<meta name="viewport" content="initial-scale=1">
<!--<link rel="stylesheet" href="../../dist/css/swiper.min.css">
<script src="../../dist/js/swiper.min.js"></script>-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}
html, body, #banner, #banner .swiper-slide {
	height: 100%;
}
body {
	background: #000;
	overflow: hidden;
}
#banner .swiper-slide {
	overflow: hidden;
}
#banner .swiper-slide img {
	width: 100%;
}
.thumb-list {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 5%;
}
.thumb {
	width: 20%;
	margin-left: 4%;
	float: left;
}
.thumb .swiper-slide img {
	width: 100%;
	display: block;
}
</style>
</head>
<body>
<div style="max-width:640px; margin:0 auto; height:100%; position:relative;">
  <div class="swiper-container" id="banner">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="img/zhiling1.jpg"  ></div>
      <div class="swiper-slide"><img src="img/zhiling2.jpg"  ></div>
      <div class="swiper-slide"><img src="img/zhiling3.jpg"  ></div>
      <div class="swiper-slide"><img src="img/zhiling4.jpg"  ></div>
    </div>
  </div>
  <div class="thumb-list">
    <div class="swiper-container thumb" id="thumb1">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/thumb1.jpg"  ></div>
        <div class="swiper-slide"><img src="img/thumb1_h.jpg"  ></div>
      </div>
    </div>
    <div class="swiper-container thumb" id="thumb2">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/thumb2.jpg"  ></div>
        <div class="swiper-slide"><img src="img/thumb2_h.jpg"  ></div>
      </div>
    </div>
    <div class="swiper-container thumb" id="thumb3">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/thumb3.jpg"  ></div>
        <div class="swiper-slide"><img src="img/thumb3_h.jpg"  ></div>
      </div>
    </div>
    <div class="swiper-container thumb" id="thumb4">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/thumb4.jpg"  ></div>
        <div class="swiper-slide"><img src="img/thumb4_h.jpg"  ></div>
      </div>
    </div>
  </div>
</div>
<script type = "text/javascript">
var bannerSwiper = new Swiper('#banner', {
	mousewheel: true,
	effect: 'coverflow',
	speed: 300,
	watchSlidesProgress: true,
	on: {
		touchMove: function() {
          console.log(11)
			progress = this.progress
			for (i = 0; i < this.slides.length; i++) {
				slideProgress = this.slides[i].progress
				if (Math.abs(slideProgress) < 1) {
					thumbSwiper[i].setTranslate(thumbSwiper[i].width * (Math.abs(slideProgress) - 1))
				}
			}
		},
		transitionStart: function() {
          console.log(22)
			activeIndex = this.activeIndex
			for (i = 0; i < thumbSwiper.length; i++) {
				if (i == activeIndex) {
					thumbSwiper[i].slideTo(1);
				} else {
					thumbSwiper[i].slideTo(0);
				}
			}
		},
	}
});
var thumbSwiper = new Swiper('.thumb', {
	watchSlidesProgress: true,
	effect: 'cube',
	touchRatio: 0,
	cubeEffect: {
		shadow: false,
	},
	on: {
		tap: function() {
          console.log(333)
			bannerSwiper.slideTo(this.$el.index());
		},
	},
});
thumbSwiper[0].slideTo(1, 0)
</script>
</body>
</html>